<template>
    <div :class="rowClass" :style="rowStyle">
        <slot></slot>
    </div>
</template>

<script>
  export default {
    name: "f-row"
    ,props:{
      gutter:{
        type:[Number,String]
      }
      ,align:{
        type:String
        ,validator(value){
          return ['left', 'right', 'center'].includes(value);
        }
      }
    }
    ,computed:{
      rowStyle(){
        let {gutter} = this;
        return {marginLeft: -gutter / 2 + 'px', marginRight: -gutter / 2 + 'px'};
      }
      ,rowClass(){
        let {align} = this;
        return ['row',align && `align-${align}`];
      }
    }
    ,provide(){
        return {
          gutter:this.gutter
        }
    }
  }
</script>

<style lang="scss">
    .row{
        display:flex;
        /*flex-wrap:nowrap; //默认值，不换行*/
        flex-wrap:wrap;

        /*margin: 0 -10px; //也就是gutter为20时，的margin值*/

        &.align-left {
            justify-content: flex-start;
        }
        &.align-right{
            justify-content:flex-end;
        }
        &.align-center {
            justify-content: center;
        }
    }
</style>
